<template>
  <a-layout class="p-team-setting__container">
    <a-spin :spinning="spinning">
      <a-layout-header class="p-team-setting__header">
        <LeftOutlined class="back_btn" @click="backToWorkbench" />
        <span class="title">团队管理</span>
        <span class="name">
          &nbsp;&nbsp;|&nbsp;&nbsp;当前团队：{{ teamStore.teamName }}
        </span>
      </a-layout-header>
      <div class="p-team-setting__content">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="horizontal"
          class="nav"
        >
          <a-menu-item :key="0">团队信息</a-menu-item>
          <a-menu-item :key="1">全部成员</a-menu-item>
          <a-menu-item :key="2" v-if="createByMe">邀请成员</a-menu-item>
        </a-menu>
        <div class="main">
          <Transition mode="out-in">
            <KeepAlive>
              <component
                :is="comps[selectedKeys[0]]"
                @updateTeamName="updateName"
              />
            </KeepAlive>
          </Transition>
        </div>
      </div>
    </a-spin>
  </a-layout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { LeftOutlined } from '@ant-design/icons-vue';
import { useTeamStore } from '@/store';
import { useRoute, useRouter } from 'vue-router';
import TeamInfo from '@/pages/teamSetting/components/teamInfo.vue';
import TeamMembers from '@/pages/teamSetting/components/teamMembers.vue';
import InviteMember from '@/pages/teamSetting/components/inviteMember.vue';

const teamStore = useTeamStore();
const router = useRouter();
const route = useRoute();
const comps = [TeamInfo, TeamMembers];

const { getTeamInfo } = teamStore;
const selectedKeys = ref([0]);
const teamName = ref('');
const teamOwner = ref('');
const createByMe = ref(false);
const spinning = ref(true);

onMounted(async () => {
  const data = await getTeamInfo();
  teamName.value = data.name;
  teamOwner.value = data.creatorNickname;
  createByMe.value = data.createByMe;
  if (createByMe.value) {
    comps.push(InviteMember);
  }
  selectedKeys.value[0] = Number(route.query.activeTab) || 0;
  spinning.value = false;
});
function updateName(data: any) {
  teamName.value = data.newName;
}
// 返回工作台
function backToWorkbench() {
  router.push({ name: 'workbench' });
}
</script>

<style scoped lang="scss">
.p-team-setting__container {
  width: 100vw;
  height: 100vh;
  background: #f7f9fa;
  .p-team-setting__header {
    height: 51px;
    line-height: 51px;
    font-size: 14px;
    color: #1d2129;
    background: #fff;
    margin-bottom: 24px;
    padding-left: 20px;
    .back_btn {
      cursor: pointer;
      margin: 0 10px;
    }
    .title {
      font-weight: 500;
    }
    .name {
      font-weight: 400;
      color: #565d64;
    }
  }
  .p-team-setting__content {
    width: 840px;
    height: calc(100vh - 99px);
    margin: 0 auto;
    padding-top: 16px;
    background: #fff;
    .nav {
      margin: 0 40px;
    }
    .main {
      padding: 24px 40px 0;
      height: calc(100% - 46px);
      overflow-y: auto;
    }
  }
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
